Today computer display devices have a wide range of available screen resolutions. Some of the standard resolutions are 640×480, 800×600, 1024×768, and 1152×768. Each of these resolutions gives the number of pixels that are displayed in the width and height of the display area. For example the 640×480 resolution displays 640 pixels across the width of the display and 480 pixels across the height of the display. These screen resolutions are typically independent of the actual size of the display area. For example a 15-inch monitor can use a resolution of 1024×768 and a 21-inch monitor can use a resolution of 640×480.
The display driver is the software running on the computer that knows about the hardware of the display device. The display driver typically knows the physical size of the display, the refresh rate of the display, the amount of video memory in the display device, the bit depth or number of colors that can be displayed, and the supported resolutions for the display device. These settings, including the resolution used for the display, can typically be changed by the user by adjusting the display driver.
Web browsers, for example Microsoft's Internet Explorer®, display web pages. The web page, when loaded, tells the web browser how and what to display. Typically this description of what the web page should look like is stored in a web page description language like HyperText Markup Language (HTML). The HTML document that describes a web page typically defines where all elements of the web page should be located. Web pages can contain text elements, graphic elements, as well as video and audio elements. The graphic elements can be bitmap images and vector objects like drawing. There are a number of parameters that can be specified when using HTML to display an image. Some of the parameters are 1) the image starting location 2) the way the text wraps the image 3) the height and width of the image. Currently there are two ways to display an image using HTML.
The first method is to specify a percent of the width and height of the web browser window. The second method is to specify the number of pixels for the width and height of the image. Each of these methods can cause problems when displaying images on different sized displays or same sized displays using different resolutions.
Displaying an image with HTML by specifying the percentage of the web browser window can cause the image to be non-proportionally scaled. Only integer values of the percent of the height and width of the web browser are available for use. When the web browser's height and width do not scale to the image height and width by an integer value, the image will be scaled by a different value in the height and width. The stretched or distorted non-proportionally scaled image can diminish the impact of using an image in the web page. Precise control over the layout of the page to be displayed cannot be achieved because the integer value requirement limits the height and width control to one percent of the height and width of the web browser.
Even when the image is an integral size of the web browser for a given web browser size, the web browser does not maintain a constant size or a constant width to height ratio. For example when the web browser is changed from “normal” view to “full screen” view the web browser typically changes its display aspect ratio. The aspect ratio is the ratio of the width to the height of a web page.
Displaying an image in a web page by specifying the number of pixels for the image height and width allows the image to remain the same size when the web browser is resized. But the size of the image is different depending on the current resolution of the display driver. For example an image that is 4×4 inches on a 17-inch monitor using a resolution of 1280×1024 would be 8×8 inches on the same monitor when using a resolution of 640×480. A potential difference of 2 to 1 in image sizes makes it difficult to create a page layout by specifying the image size using the number of pixels for the height and width. Having an image displayed at half the size that the user desired makes the image much harder to see and causes the image to lose impact.
Accordingly there is a need for a web page display that maintains the size of an image being displayed independent of the physical screen size and the resolution of the display.